[鐵鷹練成]選單列製作

DAY 31

[鐵鷹練成]CodeIgniter + Bootstrap系列第 28 篇

蒼鴻鐵鷹練成

老鷹(eagle)

2013-10-16 22:51:33

4275 瀏覽

分享至

這次老鷹要開始制做個人網站
首先先從選單列開始製作
裡面內容因該是兩層的導覽列
主要用這個 http://kkbruce.tw/Bootstrap/JavaScript#dropdowns

首先先新增一個PHP檔案
views/other/meun.php
這個頁面會把所有東西都載到這個頁面,這是老鷹的習慣 JS CSS

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>蒼天</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?=$link;?>css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="<?=$link;?>css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="<?=$link;?>js/jquery.js"></script>
<script src="<?=$link;?>js/bootstrap.min.js"></script>
<style>
#heig{
     height:10px;
}
</style>


<div class="container">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#"><strong>蒼天</strong></a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><strong>介紹</strong></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>網站介紹</strong></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>站長介紹</strong></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>聯絡站長</strong></a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown"><strong>文章區</strong></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<!--這邊以後會從資料庫的文章類別來foreach-->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">#</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown"><strong>其他功能</strong></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>留言板</strong></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>討論區</strong></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>相簿區</strong></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>暫留</strong></a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown"><strong>站長推薦</strong></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
<!--到時候也會有資料庫來管理友站-->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>**</strong></a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown"><strong>管理</strong></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop5">
<!--到時後登入時只會看到個人資料管理 沒有登入時會出現登入 網站管理也是一樣 做判斷 -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>登入</strong></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>個人資料管理</strong></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><strong>網站管理</strong></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

在新增一個PHP資料(先測試頁面用)
controllers/view.php

<?php
class view extends CI_Controller{
    
    function __construct() {
        parent::__construct();
        $this->load->model('sql');
        $this->load->library('session');
        $this->load->helper('url');
    }
    
    function meun(){
        /**site_url(); base_url();請參考 : http://www.codeigniter.org.tw/user_guide/libraries/uri.html **/
        $data['index'] = site_url();
        $data['link'] = base_url();
        $data['file'] = "view/";
        $this->load->view('other/meun',$data);
    }
    
}
?>

且戰且走
待續......